<template>
	<view>
		<view class="body after-navber">
		    <view class="goods-list">
		        <view class="goods-item" v-for="(item, index) in goods_list" :key="item.id">
		            <view class="flex-row score-row">
		                <view class="flex-grow-0">
		                    <image class="goods-pic" :src="item.image"></image>
		                </view>
		                <view class="flex-grow-1 flex-row">
		                    <view
		                        @tap="setScore"
		                        :class="'flex-grow-1 score-item flex-y-center flex-x-center ' + (item.score == 3 ? 'active' : '')"
		                        :data-index="index"
		                        data-score="3"
		                    >
		                        <image :src="'/static/images/icon-comment-score-3' + (item.score == 3 ? '.active' : '') + '.png'"></image>
		                        <text>好评</text>
		                    </view>
		                    <view
		                        @tap="setScore"
		                        :class="'flex-grow-1 score-item flex-y-center flex-x-center ' + (item.score == 2 ? 'active' : '')"
		                        :data-index="index"
		                        data-score="2"
		                    >
		                        <image :src="'/static/images/icon-comment-score-2' + (item.score == 2 ? '.active' : '') + '.png'"></image>
		                        <text>中评</text>
		                    </view>
		                    <view
		                        @tap="setScore"
		                        :class="'flex-grow-1 score-item flex-y-center flex-x-center ' + (item.score == 1 ? 'active' : '')"
		                        :data-index="index"
		                        data-score="1"
		                    >
		                        <image :src="'/static/images/icon-comment-score-1' + (item.score == 1 ? '.active' : '') + '.png'"></image>
		                        <text>差评</text>
		                    </view>
		                </view>
		            </view>
		
		            <view class="flex-row content-row">
		                <view class="flex-grow-0 nowrap form-label">评价内容</view>
		                <view class="flex-grow-1">
		                    <textarea @input="contentInput" :data-index="index" maxlength="2000" placeholder="请输入评价内容" placeholderStyle="color:#ccc"></textarea>
		                </view>
		            </view>
		
		            <view class="pic-list">
		                <view class="image-preview" v-for="(item, pic_index) in item.pic_list" :key="item.id">
		                    <text @tap="deleteImage(index,pic_index)" class="flex-x-center flex-y-center image-del" :data-index="index" :data-pic-index="pic_index">×</text>
		
		                    <image mode="aspectFill" :src="item" style="width: 160rpx; height: 160rpx"></image>
		                </view>
		                <view @tap="chooseImage" class="image-picker" :data-index="index" v-if="!item.pic_list || item.pic_list.length < 6">
		                    <image src="/static/images/vPlUk8CwSBK3a6Gj.png" style="width: 160rpx; height: 160rpx"></image>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="bar-bottom">
		        <view @tap="commentSubmit" class="submit-btn flex-x-center flex-y-center">提交</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import {My} from '../../../apirequest/my-model.js';
	var m = new My();
	export default {
		data() {
			return {
				type:'daodain',   //daodain 服务套餐订单 product 普通商城订单 score 积分订单 
				info:'',
				goods_list:[]
			}
		},
		onLoad(options) {
			if(options.type){
				this.type = options.type;
			}
			this.id = options.id
			this._index()
		},
		methods: {
			_index(){
				var that = this
				m.get_comment_order({id:this.id,type:this.type},(res) => {
					if(res.code == 1){
						that.info = res.data
						that.goods_list = res.data.goods_list
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			commentSubmit(){
				var that = this;
				m.comment_order({goods_list:this.goods_list,type:this.type,id:this.id},(res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			},
			contentInput(e){
				var index =  e.currentTarget.dataset.index;
				var goods_list = this.goods_list
				goods_list[index].content = e.detail.value;
				this.goods_list = goods_list
			},
			setScore(e){
				var index =  e.currentTarget.dataset.index;
				var score = e.currentTarget.dataset.score;
				var goods_list = this.goods_list
				goods_list[index].score = score
				this.goods_list = goods_list;
			},
			chooseImage(e){
				var index =  e.currentTarget.dataset.index;
				var _this = this;
				if(!this.goods_list[index].pic_list){
					this.goods_list[index].pic_list = [];
				}
				var len =  this.goods_list[index].pic_list.length
				uni.chooseImage({
					count: 6,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'], 
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach((e,i) => {
							len++;
							if(len > 6){
								uni.showToast({
									title:'最多只能上传6张图片',
									icon:'none'
								})
								return false;
							}
							m.upload(tempFilePaths[i], (r) => {
								var r = JSON.parse(r);
								if (r.code == 1) {
								_this.goods_list[index].pic_list.splice(len+i, 1, r.data.fullurl);
														
								} else {
									uni.showToast({
										title: r.msg,
										icon: 'none'
									})
								}
							},'store')
						})
				
					}
				})
			},
			deleteImage(inx1,inx2){
				var images = this.goods_list[inx1].pic_list 
				images.splice(inx2, 1);
			    this.goods_list[inx1].pic_list = images;
			},
		}
	}
</script>

<style>
.bar-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.submit-btn {
    background: #ff4544;
    color: #fff;
    height: 100rpx;
}

.goods-list {
    border-top: 1rpx solid #e3e3e3;
    padding-bottom: 100rpx;
}

.goods-item {
    background: #fff;
    border-bottom: 1rpx solid #e3e3e3;
    margin-bottom: 20rpx;
}

.goods-item .score-row {
    padding: 24rpx 20rpx;
    border-bottom: 1rpx #eee solid;
}

.goods-item .score-row .goods-pic {
    width: 72rpx;
    height: 72rpx;
}

.goods-item .score-row .score-item image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
}

.goods-item .score-row .score-item.active {
    color: #ff4544;
}

.goods-item .content-row {
    padding: 24rpx 20rpx;
}

.goods-item .form-label {
    margin-right: 24rpx;
}

.goods-item textarea {
    width: 100%;
    height: 200rpx;
    padding: 0 0;
}

.goods-item .pic-list {
    padding: 24rpx 20rpx;
    margin-left: -20rpx;
    margin-top: -20rpx;
}

.image-picker {
    font-size: 0;
}

.image-picker,
.image-preview {
    display: inline-block;
    margin-left: 20rpx;
    margin-top: 20rpx;
}

.image-preview {
    position: relative;
}

.image-preview .image-del {
    position: absolute;
    top: -15rpx;
    right: -15rpx;
    height: 50rpx;
    width: 50rpx;
    background: #ff4544;
    color: #fff;
    font-weight: bolder;
    border-radius: 999rpx;
    font-size: 9pt;
    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
    z-index: 999;
}
</style>
